<template>
  <div class="text-panel-w">
    <div v-for="(HTMLObject, index) in HTMLArr" :key="index" :class="HTMLObject.clazz" v-html="HTMLObject.text">
    </div>
  </div>
</template>

<script>
export default {
  name: 'TextPanel',
  props: ['textArr'],
  computed: {
    HTMLArr() {
      const arr = this.textArr || [], res = []
      // 1. 初次筛选
      arr.forEach(text => {
        const stripRes = this.stripRuleString(text)
        if (stripRes.newWrapper) res.push(stripRes)
        else {
          res[res.length - 1].text += stripRes.text
        }
      })


      console.log(res)

      return res
    }
  },
  methods: {
    stripRuleString(str = '') {
      let clazz = [], newWrapper
      const arr = str.split(',')
      let wrapperType = arr[0], size = arr[1], text = arr[2]
      clazz.push(wrapperType, size)
      if (wrapperType.toLowerCase() !== 'append') newWrapper = true
      else if (wrapperType === 'APPEND') {
        text = `<strong>${text}</strong>`
      }

      return {
        newWrapper,
        clazz,
        text
      }
    }
  },
}
</script>

<style lang="scss" scoped>
@import "~@/assets/common.scss";
.xxl {
  font-size: 10px;
}

.xl {
  font-size: 8px;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 15px;
  color: rgb(100, 100, 100);
}

.indent {

  &.xl {
    text-indent: 16px;
  }

  &.xxl {
    text-indent: 20px;
  }
}


</style>